import React, { useState, useEffect, useRef } from "react";
import { Graph, register, Rect, ExtensionCategory } from "@antv/g6";

class UserCardNode extends Rect {
  get nodeData() {
    return this.context.graph.getNodeData(this.id);
  }

  get data() {
    return this.nodeData.data || {};
  }

  // 头像样式
  getAvatarStyle(attributes) {
    const [width, height] = this.getSize(attributes);
    return {
      x: -width / 2 + 20,
      y: -height / 2 + 15,
      width: 30,
      height: 30,
      src: attributes.avatarUrl || "",
      radius: 15, // 圆形头像
    };
  }

  drawAvatarShape(attributes, container) {
    if (!attributes.avatarUrl) return;

    const avatarStyle = this.getAvatarStyle(attributes);
    this.upsert("avatar", "image", avatarStyle, container);
  }

  // 状态徽章样式
  getBadgeStyle(attributes) {
    const [width, height] = this.getSize(attributes);
    const status = this.data.status || "offline";
    const colorMap = {
      online: "#52c41a",
      busy: "#faad14",
      offline: "#8c8c8c",
    };

    return {
      x: width / 2 - 8,
      y: -height / 2 + 8,
      r: 4,
      fill: colorMap[status],
      stroke: "#fff",
      lineWidth: 2,
    };
  }

  drawBadgeShape(attributes, container) {
    const badgeStyle = this.getBadgeStyle(attributes);
    this.upsert("badge", "circle", badgeStyle, container);
  }

  // 用户名样式
  getUsernameStyle(attributes) {
    const [width, height] = this.getSize(attributes);
    return {
      x: -width / 2 + 10,
      y: -height / 2 + 10,
      text: attributes.username || "",
      fontSize: 14,
      fill: "#b91a1aff",
      fontWeight: "bold",
      textAlign: "left",
      textBaseline: "middle",
    };
  }

  drawUsernameShape(attributes, container) {
    if (!attributes.username) return;

    const usernameStyle = this.getUsernameStyle(attributes);
    this.upsert("username", "text", usernameStyle, container);
  }

  // 角色标签样式
  getRoleStyle(attributes) {
    const [width, height] = this.getSize(attributes);
    console.log("width, height", width, height, attributes?.userStatus);
    const theNamePosition =
      attributes?.userStatus === "offline"
        ? -height / 2 + 35
        : -height / 2 + 10;

    return {
      x: -width / 2 + 10,
      y: theNamePosition,
      text: attributes.userRole || "",
      fontSize: 11,
      fill: "#16e22aff",
      textAlign: "left",
      textBaseline: "middle",
    };
  }

  drawRoleShape(attributes, container) {
    if (!attributes.userRole) return;

    const roleStyle = this.getRoleStyle(attributes);
    this.upsert("role", "text", roleStyle, container);
  }

  render(attributes, container) {
    // 渲染基础矩形
    super.render(attributes, container);

    // 添加各个组件
    // this.drawAvatarShape(attributes, container);
    // this.drawBadgeShape(attributes, container);
    this.drawUsernameShape(attributes, container);
    this.drawRoleShape(attributes, container);
  }
}

register(ExtensionCategory.NODE, "user-card-node", UserCardNode);

const CustomNodeGraph = () => {
  const containerRef = useRef();

  useEffect(() => {
    if (!containerRef.current) return;

    const graph = new Graph({
      container: containerRef.current,
      height: 1200,
      width: 1200,
      data: {
        nodes: [
          {
            id: "user1",
            style: { x: 100, y: 100 },
            data: {
              name: "张小明",
              role: "前端工程师",
              status: "online",
              avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang",
            },
          },
          {
            id: "user2",
            style: { x: 100, y: 300 },
            data: {
              name: "张小明1",
              role: "前端工程师1",
              status: "offline",
              avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang",
            },
          },
        ],
      },
      node: {
        type: "user-card-node",
        style: {
          size: [240, 50],
          fill: "#ffffff",
          stroke: "#d9d9d9",
          lineWidth: 1,
          radius: 6,
          // 数据映射
          avatarUrl: (d) => d.data.avatar,
          username: (d) => d.data.name,
          userRole: (d) => d.data.role,
          userStatus: (d) => d.data.status,
        },
      },
      behaviors: ["drag-canvas", "zoom-canvas", "drag-node", "drag-element"],
    });

    graph.render();

    return () => graph.destroy();
  }, []);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <div
        ref={containerRef}
        style={{
          flex: 1,
          background: "#f0f2f5",
          margin: 16,
          borderRadius: 8,
          overflow: "hidden",
          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
        }}
      />
    </div>
  );
};

export default CustomNodeGraph;

//   data: {
//         nodes: [
//           {
//             id: "root",
//             name: "Root Server",
//             status: "success",
//             type: "local",
//             url: "http://localhost:3000",
//             style: {
//               collapsed: false,
//             },
//             children: ["server1", "server2"],
//           },
//           {
//             id: "server1",
//             name: "Server 1",
//             status: "success",
//             type: "local",
//             url: "http://server1.local",
//             style: {
//               collapsed: false,
//             },
//             children: ["server1-1", "server1-2"],
//           },
//           {
//             id: "server1-1",
//             name: "Server 1-1",
//             status: "success",
//             type: "local",
//             url: "http://server1-1.local",
//             style: {
//               collapsed: true,
//             },
//           },
//           {
//             id: "server1-2",
//             name: "Server 1-2",
//             status: "error",
//             type: "remote",
//             url: "http://server1-2.local",
//             style: {
//               collapsed: true,
//             },
//           },
//           {
//             id: "server2",
//             name: "Server 2",
//             status: "warning",
//             type: "remote",
//             url: "http://server2.local",
//             style: {
//               collapsed: false,
//             },
//             children: ["server2-1", "server2-2"],
//           },
//           {
//             id: "server2-1",
//             name: "Server 2-1",
//             status: "warning",
//             type: "remote",
//             url: "http://server2-1.local",
//             style: {
//               collapsed: true,
//             },
//           },
//           {
//             id: "server2-2",
//             name: "Server 2-2",
//             status: "success",
//             type: "local",
//             url: "http://server2-2.local",
//             style: {
//               collapsed: true,
//             },
//           },
//         ],
//         edges: [
//           {
//             source: "root",
//             target: "server1",
//           },
//           {
//             source: "root",
//             target: "server2",
//           },
//           {
//             source: "server1",
//             target: "server1-1",
//           },
//           {
//             source: "server1",
//             target: "server1-2",
//           },
//           {
//             source: "server2",
//             target: "server1-2",
//           },
//           {
//             source: "server1",
//             target: "server2-2",
//           },
//           {
//             source: "server2",
//             target: "server2-1",
//           },
//           {
//             source: "server2",
//             target: "server2-2",
//           },
//         ],
//       },
